<template>
  <page-header-wrapper v-loading="loading">
    <page-tab-list></page-tab-list>

    <a-card :bordered="false">
      <a-form-model
        ref="wechatForm"
        :rules="wechatRules"
        :model="wechatInfo"
        :labelCol="{ span: 3 }"
        :wrapperCol="{ span: 17 }"
      >
        <h4>代理佣金设置</h4>
        <a-form-model-item label="店铺佣金比例" prop="bd_agent_percent">
          <a-input-number :min="0" :precision="2" :step="0.01" v-model="wechatInfo.bd_agent_percent" />
          <em> %</em>
          <div class="ts">备注：佣金 = 订单金额 * 商城让利比例 * 店铺佣金比例</div>
        </a-form-model-item>
        <!-- <a-form-model-item label="供货商佣金比例" prop="supplier_bd_agent_percent">
          <a-input-number :min="0" :precision="2" :step="0.01" v-model="wechatInfo.supplier_bd_agent_percent" />
        </a-form-model-item> -->
      </a-form-model>
      <a-divider />

      <div class="tc">
        <a-button :loading="btnLoading" type="primary" @click="submitForm"> 保存 </a-button>
      </div>
    </a-card>
  </page-header-wrapper>
</template>

<script>
import { setBdAgencyPriceConfig, getBdAgencyPriceConfig } from '@/api/daili'
export default {
  name: 'saasPopularizeCommissionSetting',
  data() {
    return {
      loading: false,
      btnLoading: false,
      wechatInfo: {
        bd_agent_percent: '',
        supplier_bd_agent_percent: '',
      },
      wechatRules: {
        supplier_bd_agent_percent: [{ required: true, message: '请输入店铺佣金比例', trigger: 'blur' }],
        bd_agent_percent: [{ required: true, message: '请输入供货商佣金比例', trigger: 'blur' }],
      },
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 18 },
      },
    }
  },

  created() {
    this.getData()
  },

  methods: {
    getData() {
      this.loading = true
      getBdAgencyPriceConfig()
        .then((res) => {
          if (res.code === 0) {
            this.$nextTick(() => {
              this.wechatInfo = res.data
            })
          }
        })
        .catch((error) => {
          console.log(error)
        })
        .then(() => {
          this.loading = false
        })
    },

    submitForm() {
      this.$refs.wechatForm.validate((valid) => {
        if (valid) {
          this.btnLoading = true
          setBdAgencyPriceConfig(this.wechatInfo)
            .then((res) => {
              if (res.code == 0) {
                this.$message.success('保存成功！')
              } else {
                this.$message.warning(res.msg ? res.msg : '保存失败！')
              }
            })
            .catch((error) => {
              console.log(error)
            })
            .then(() => {
              this.btnLoading = false
            })
        }
      })
    },
  },
}
</script>

<style lang="less" scoped>
h4 {
  font-size: 16px;
  font-weight: bold;
}

.tc {
  text-align: center;
}

.ts {
  color: #ff0000;
}
</style>
